<template>
  <div class="app-container">
    <div class="single_header">
      <el-button type="primary" plain icon="el-icon-close" @click="handleClose">返回</el-button>
      <div class="singleTitle">{{ activeProjectinfo.entryname }}</div>
    </div>

    <div class="single_project">
      <div class="single_left">
        <div class="projectInfor">
          <el-card class="single-card">
            <div slot="header" class="single-header">
              <span>项目信息</span>
              <el-button icon="el-icon-edit" style="float: right; padding: 3px 0" type="text" @click="handleProjectModify" v-hasPermi="['dr:projectinfo:edit']"> 修改</el-button>
            </div>
            <div class="single_content">
              <table>
                <tr>
                  <td><big>所在地址</big></td>
                  <td>{{ activeProjectinfo.address }}</td>
                </tr>
                <tr>
                  <td><big>联系人</big></td>
                  <td>{{ activeProjectinfo.contacts }}</td>
                </tr>
                <tr>
                  <td><big>联系方式</big></td>
                  <td>{{ activeProjectinfo.telephone }}</td>
                </tr>
                <tr>
                  <td><big>利用方式</big></td>
                  <td>
                    <span v-if="activeProjectinfo.utilizationmode == 1">地下水源热泵型</span>
                    <span v-if="activeProjectinfo.utilizationmode == 2">土壤源热泵型</span>
                    <span v-if="activeProjectinfo.utilizationmode == 3">中深层水热型</span>
                  </td>
                </tr>
                <tr>
                  <td><big>坐标</big></td>
                  <td>
                    {{ activeProjectinfo.longitude }} ,
                    {{ activeProjectinfo.latitude }}
                  </td>
                </tr>
                <tr>
                  <td><big>供暖制冷面积</big></td>
                  <td>{{ activeProjectinfo.heatingarea }}m³</td>
                </tr>
                <tr>
                  <td><big>项目概况</big></td>
                  <td>{{ activeProjectinfo.content }}</td>
                </tr>
                <tr>
                  <td><big>起用日期</big></td>
                  <td>{{ activeProjectinfo.startdate }}</td>
                </tr>
                <tr>
                  <td><big>项目状态</big></td>
                  <td>
                    <span v-if="activeProjectinfo.enabled == 1">启用</span>
                    <span v-if="activeProjectinfo.enabled == 0">停用</span>
                  </td>
                </tr>
              </table>
            </div>
          </el-card>
        </div>
        <div class="wellInfor">
          <el-card class="single-card">
            <div slot="header" class="single-header">
              <span>地热井信息</span>
              <!--  <el-button style="float: right; padding: 3px 3px" type="text">修改</el-button>
              <el-button style="float: right; padding: 3px 0" type="text">安装</el-button> -->
              <el-button icon="el-icon-plus" style="float: right; padding: 3px 0" type="text" @click="handleWellAdd" v-hasPermi="['well:geothermalwellinfo:add']">添加</el-button>
            </div>
            <div class="single_content">
              <el-table :data="activeWellInfor" style="width: 100%" @row-click="handleWellRow">
                <el-table-column prop="wellno" label="编号" width="50" align="center" />
                <el-table-column prop="wellname" label="地热井名称" width="250" align="center">
                </el-table-column>
                <el-table-column label="地热类型" align="center" prop="welltype">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.geothermaltype" :value="scope.row.welltype" />
                  </template>
                </el-table-column>
                <el-table-column label="使用状态" align="center" prop="welltype" width="100">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.enabled" :value="scope.row.enabled" />
                  </template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" align="center" width="100">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteWell(scope.row)" style="color:red;" v-hasPermi="['well:geothermalwellinfo:remove']">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleWellModify(scope.row)" v-hasPermi="['well:geothermalwellinfo:edit']">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
      <div class="single_gap"></div>
      <div class="single_right">
        <div class="monitorData">
          <el-card class="single-card">
            <div slot="header" class="single-header">
              <span>项目资料数据</span>
              <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus" @click="handleDocmentDialog">录入</el-button>
              <!-- <el-button style="float: right; padding: 3px 0" type="text"> 修改</el-button>
              <el-button style="float: right; padding: 3px 4px" type="text">新增</el-button> -->
            </div>
            <div class="single_content">
              <el-table :data="documentData" style="width: 100%" @row-click="handleDocumentRow">
                <el-table-column label="序号" type="index" />
                <el-table-column label="上传人" align="center" prop="uploader" />
                <el-table-column label="文件模块" align="center" prop="fileModule">
                  <template slot-scope="scope">
                    <span v-if="scope.row.fileModule == 'zhuzhuangtu'">柱状图</span>
                    <span v-if="scope.row.fileModule == 'shuizhitu'">水质分析图</span>
                    <span v-if="scope.row.fileModule == 'othersdocument'">其他文档资料</span>
                  </template>
                </el-table-column>
                <el-table-column label="文件类型" align="center" prop="fileType" />
                <el-table-column label="文件说明" align="center" prop="content" />
                <el-table-column label="上传日期" align="center" prop="time" width="150">
                  <template slot-scope="scope">
                    <span>{{
                      parseTime(scope.row.time, "{y}-{m}-{d} {h}:{m}")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleDocumentSee(scope.row)">查看</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleDocumentDelete(scope.row)" style="color:red;" v-hasPermi="['dr:upload:remove']">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[seeDocumentUrl]" />
            </div>
          </el-card>
        </div>
        <div class="deviceInfor">
          <el-card class="single-card">
            <div slot="header" class="single-header">
              <span>监测数据</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text"> 修改</el-button> -->
              <!-- <el-button icon="el-icon-download" style="float: right; padding: 3px 4px" type="text">安装设备 </el-button> -->
            </div>
            <div class="single_content">
              <el-table :data="monitorData" style="width: 100%" @row-click="handleWellRow" height="300">
                <el-table-column label="时间" align="center" prop="时间" width="180">
                </el-table-column>
                <el-table-column prop="回水温" align="center" label="回水温">
                </el-table-column>
                <el-table-column prop="水温" align="center" label="水温">
                </el-table-column>
                <el-table-column prop="回灌量" align="center" label="回灌量">
                </el-table-column>
                <el-table-column prop="回水位" align="center" label="回水位">
                </el-table-column>
                <el-table-column prop="水位" align="center" label="水位">
                </el-table-column>
              </el-table>
              <!--  <pagination v-show="monitorDataPage.total>0" :total="monitorDataPage.total" :page.sync="monitorDataPage.pageNum" :limit.sync="monitorDataPage.pageSize" @pagination="getMonitorList" /> -->
            </div>
          </el-card>
        </div>
        <div class="docmentData">
          <el-card class="single-card">
            <div slot="header" class="single-header">
              <span>设备信息</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="handleDocmentDialog">录入</el-button> -->
              <el-button icon="el-icon-download" style="float: right; padding: 3px 4px" type="text" @click="handleDeviceAdd" v-hasPermi="['dr:equipmentinfo:add']">安装设备
              </el-button>
            </div>
            <div class="single_content">
              <el-table :data="devices" style="width: 100%" @row-click="handleWellRow">
                <el-table-column label="地热井名称" align="center" prop="wellname" width="250" />
                <el-table-column label="设备编号" align="center" prop="equipmentno" />
                <el-table-column prop="equipmentname" align="center" label="设备名称">
                </el-table-column>
                <el-table-column label="出厂日期" align="center" prop="exfactorydate" width="100">
                  <template slot-scope="scope">
                    <span>{{
                      parseTime(scope.row.exfactorydate, "{y}-{m}-{d}")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDeviceModify(scope.row)" v-hasPermi="['dr:equipmentinfo:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeviceDelete(scope.row)" v-hasPermi="['dr:equipmentinfo:remove']">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="documentOpen" width="500px" custom-class="documentDialog" @close="documentDialogClose">
      <div class="documentType">
        <el-radio v-model="docmentRadio" :label="1">柱状图</el-radio>
        <el-radio v-model="docmentRadio" :label="2">水质分析图</el-radio>
        <el-radio v-model="docmentRadio" :label="3">其他文档资料</el-radio>
      </div>
      <!-- <div class="documentProgress">
        <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage"></el-progress>
      </div> -->
      <div class="documentContent">
        <span>文件说明：</span>
        <el-input placeholder="请输入内容" v-model="upload.data.content"></el-input>
      </div>

      <div class="documentUpload">
        <el-upload ref="upload" class="upload-demo" drag :limit="1" :before-upload="getFileType" :accept="upload.file_type" :action="upload.url" :data="upload.data" :headers="upload.headers" :show-file-list="true" :file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <el-button style="margin-left: 10px" icon="el-icon-upload" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button> -->
        </el-upload>
      </div>
      <!-- <el-tag>可上传文件格式：.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx</el-tag> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="documentSubmitForm">录入</el-button>
        <el-button @click="documentCancel">取 消</el-button>
      </div>
      <!--  文件说明：<el-input v-model="content" autosize type="textarea"></el-input> -->
    </el-dialog>

    <!-- 添加或修改项目基本信息对话框 -->
    <el-dialog title="修改项目基本信息" :visible.sync="projectOpen" width="900px" append-to-body custom-class="singleDialog">
      <template slot="title">
        <div>
          <i class="el-icon-edit"></i>
          <span> 修改项目基本信息</span>
        </div>
      </template>
      <el-form ref="projectForm" :model="projectForm" :rules="rules" label-width="80px">
        <table class="table">
          <caption style="font-size: 20px; padding: 10px 0px">
            项目基本信息
          </caption>
          <tr>
            <th class="leibie" colspan="2">项目名称</th>
            <th>
              <el-input v-model="projectForm.entryname" placeholder="项目名称" />
            </th>
            <th class="leibie" rowspan="4">地热井</th>
            <th class="leibie2">井深</th>
            <th>
              <el-input v-model="projectForm.welldepth" placeholder="请输入井深" />
            </th>
          </tr>
          <tr>
            <th class="leibie" colspan="2">项目单位</th>
            <th>
              <el-input v-model="projectForm.company" placeholder="请输入项目单位" />
            </th>
            <th>静水位</th>
            <th>
              <el-input v-model="projectForm.waterlevel" placeholder="请输入静水位" />
            </th>
          </tr>
          <tr>
            <th class="leibie" rowspan="2">地址</th>
            <th class="leibie2">地市</th>
            <th>
              <el-select v-model="projectForm.addcode" placeholder="请选择项目地址">
                <el-option v-for="dict in dict.type.region_code" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </th>
            <th>成井温度</th>
            <th>
              <el-input v-model="projectForm.temperature" placeholder="请输入成井温度" />
            </th>
          </tr>
          <tr>
            <th>详细地址</th>
            <th>
              <el-input v-model="projectForm.address" placeholder="请输入详细地址" />
            </th>
            <th>成井流量</th>
            <th>
              <el-input v-model="projectForm.wellflow" placeholder="请输入成井流量" />
            </th>
          </tr>
          <tr>
            <th class="leibie" rowspan="2">坐标</th>
            <th>经度</th>
            <th>
              <el-input v-model="projectForm.longitude" placeholder="请输入经度坐标" />
            </th>
            <th class="leibie" colspan="2">利用方式</th>
            <th>
              <el-select v-model="projectForm.utilizationmode" placeholder="请选择利用方式">
                <el-option v-for="dict in dict.type.utilizationmode" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </th>
          </tr>
          <tr>
            <th>纬度</th>
            <th>
              <el-input v-model="projectForm.latitude" placeholder="请输入纬度坐标" />
            </th>
            <th class="leibie" colspan="2">供热面积</th>
            <th>
              <el-input v-model="projectForm.heatingarea" placeholder="请输入供暖面积" />
            </th>
          </tr>
          <tr>
            <th class="leibie" rowspan="2">联系人</th>
            <th>联系人</th>
            <th>
              <el-input v-model="projectForm.contacts" placeholder="请输入联系人" />
            </th>
            <th class="leibie" colspan="2">起用日期</th>
            <th>
              <el-date-picker clearable size="small" v-model="projectForm.startdate" type="date" value-format="yyyy-MM-dd" placeholder="选择起用日期">
              </el-date-picker>
            </th>
          </tr>
          <tr>
            <th>联系电话</th>
            <th>
              <el-input v-model="projectForm.telephone" placeholder="请输入联系电话" />
            </th>
            <th class="leibie" colspan="2">使用状态</th>
            <th>
              <el-select v-model="projectForm.enabled" placeholder="请选择使用状态">
                <el-option v-for="dict in dict.type.enabled" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </th>
          </tr>
          <tr>
            <th class="xmgk">项目概况</th>
            <th colspan="5">
              <el-input v-model="projectForm.content" autosize type="textarea"></el-input>
            </th>
          </tr>
          <tr>
            <th class="leibie">录入人</th>
            <th colspan="5">
              <el-input v-model="projectForm.inputuser" placeholder="请输入录入人" />
            </th>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="projectSubmitForm">确 定</el-button>
        <el-button @click="projectCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改地热井基本信息对话框 -->
    <el-dialog title="修改地热井基本信息" :visible.sync="wellOpen" width="900px" append-to-body custom-class="singleDialog">
      <template slot="title">
        <div>
          <i class="el-icon-edit"></i>
          <span> 添加地热井信息</span>
        </div>
      </template>
      <el-form ref="wellForm" :model="wellForm" :rules="rules" label-width="100px">
        <table class="table">
          <caption style="font-size: 20px; padding: 10px 0px">
            地热井基本信息
          </caption>
          <tr>
            <th class="leibie" colspan="2">项目名称</th>
            <th>
              <!-- <el-select v-model="projectEntryname" filterable placeholder="请搜索隶属项目" @change="projectEntrynameChange">
                <el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value" disabled="true">
                </el-option>
              </el-select> -->
              <el-input v-model="projectEntryname" placeholder="隶属项目名称" :disabled="true" />
            </th>
            <th class="leibie" rowspan="4">地热井</th>
            <th class="leibie2">井深</th>
            <th>
              <el-input v-model="wellForm.welldepth" placeholder="请输入井深" />
            </th>
          </tr>
          <tr>
            <th class="leibie" colspan="2">项目编号</th>
            <th>
              <el-input v-model="wellForm.projectno" placeholder="请输入隶属项目编号" :disabled="true" />
            </th>
            <th class="leibie2">静水位</th>
            <th>
              <el-input v-model="wellForm.staticlevel" placeholder="请输入静止水位" />
            </th>
          </tr>
          <tr>
            <th class="leibie" colspan="2">地热井名称</th>
            <th>
              <el-input v-model="wellForm.wellname" placeholder="请输入地热井名称" />
            </th>
            <th class="leibie2">成井温度</th>
            <th>
              <el-input v-model="wellForm.temperature" placeholder="请输入成井温度" />
            </th>
          </tr>
          <tr>
            <th class="leibie" rowspan="2">坐标</th>
            <th class="leibie2">经度</th>
            <th>
              <el-input v-model="wellForm.longitude" placeholder="请输入经度坐标" />
            </th>
            <th class="leibie2">成井流量</th>
            <el-input v-model="wellForm.wellflow" placeholder="请输入成井流量" />
          </tr>
          <tr>
            <th>纬度</th>
            <th>
              <el-input v-model="wellForm.longitude" placeholder="请输入经度坐标" />
            </th>
            <th class="leibie" rowspan="5">水位</th>
            <th>静水位埋深</th>
            <th>
              <el-input v-model="wellForm.staticdepth" placeholder="请输入静水位埋深" />
            </th>
          </tr>
          <tr>
            <th class="leibie" rowspan="4">钻孔信息</th>
            <th>孔口高度</th>
            <th>
              <el-input v-model="wellForm.atitude" placeholder="请输入孔口高程" />
            </th>
            <th>动水位埋深</th>
            <th>
              <el-input v-model="wellForm.dynamicdepth" placeholder="请输入动水位埋深" />
            </th>
          </tr>
          <tr>
            <th>孔口直径</th>
            <th>
              <el-input v-model="wellForm.orificediameter" placeholder="请输入孔口直径" />
            </th>
            <th>起始取水位</th>
            <th>
              <el-input v-model="wellForm.startlevel" placeholder="请输入起始取水位" />
            </th>
          </tr>
          <tr>
            <th>管口直径</th>
            <th>
              <el-input v-model="wellForm.nozzlediameter" placeholder="请输入管口直径" />
            </th>
            <th>终止取水位</th>
            <th>
              <el-input v-model="wellForm.endlevel" placeholder="请输入终止取水位" />
            </th>
          </tr>
          <tr>
            <th>管壁厚度</th>
            <th>
              <el-input v-model="wellForm.pipewalldiameter" placeholder="请输入管壁厚度" />
            </th>
            <th>报警水位</th>
            <th>
              <el-input v-model="wellForm.waringlevel" placeholder="请输入报警水位" />
            </th>
          </tr>
          <tr>
            <th class="leibie" colspan="2">使用状态</th>
            <th>
              <el-select v-model="wellForm.enabled" placeholder="请选择使用状态">
                <el-option v-for="dict in dict.type.enabled" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </th>
            <th class="leibie" colspan="2">录入人</th>
            <th>
              <el-input placeholder="请输入录入人" />
            </th>
          </tr>
          <tr>
            <th class="xmgk" colspan="2">地热井概况</th>
            <th colspan="4">
              <el-input v-model="wellForm.content" autosize type="textarea"></el-input>
            </th>
          </tr>

        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="wellSubmitForm">确 定</el-button>
        <el-button @click="wellCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改监测设备信息对话框 -->
    <el-dialog :title="title" :visible.sync="deviceOpen" width="900px" append-to-body class="singleDialog">
      <template slot="title">
        <div>
          <i class="el-icon-edit"></i>
          <span> 安装地热井设备</span>
        </div>
      </template>
      <el-form ref="deviceForm" :model="deviceForm" :rules="rules" label-width="110px">
        <table class="table">
          <caption style="font-size: 20px; padding: 10px 0px">
            地热井设备基本信息
          </caption>
          <tr>
            <th class="leibie1">隶属地热井</th>
            <th>
              <el-select v-model="deviceForm.wellno" placeholder="请选择隶属地热井">
                <el-option v-for="item in activeWellInfor" :key="item.wellno" :label="item.wellname" :value="item.wellno"></el-option>
              </el-select>
            </th>
            <th class="leibie" rowspan="2">坐标</th>
            <th class="leibie2">经度</th>
            <th>
              <el-input v-model="deviceForm.longitude" placeholder="请输入经度坐标" />
            </th>
          </tr>
          <tr>
            <th class="leibie1">设备名称</th>
            <th>
              <el-input v-model="deviceForm.equipmentname" placeholder="请输入设备名称" />
            </th>
            <th class="leibie2">纬度</th>
            <th>
              <el-input v-model="deviceForm.latitude" placeholder="请输入纬度坐标" />
            </th>
          </tr>
          <tr>
            <th class="leibie1">设备编号</th>
            <th>
              <el-input v-model="deviceForm.equipmentno" placeholder="请输入设备编号" />
            </th>
            <th class="leibie" colspan="2">设备厂商</th>
            <th>
              <el-input v-model="deviceForm.equipmentfirm" placeholder="请输入设备厂商" />
            </th>
          </tr>
          <tr>
            <th class="leibie1">使用状态</th>
            <th>
              <el-select v-model="deviceForm.enabled" placeholder="请选择使用状态">
                <el-option v-for="dict in dict.type.enabled" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
              </el-select>
            </th>
            <th class="leibie" colspan="2">出厂日期</th>
            <th>
              <el-date-picker clearable size="small" v-model="deviceForm.exfactorydate" type="date" value-format="yyyy-MM-dd" placeholder="选择出厂日期">
              </el-date-picker>
            </th>
          </tr>
          <tr>
            <th class="xmgk">设备概况</th>
            <th colspan="4">
              <el-input v-model="deviceForm.content" autosize type="textarea" />
            </th>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deviceSubmitForm">确 定</el-button>
        <el-button @click="deviceCancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import {
  listProjectinfo,
  getProjectinfo,
  delProjectinfo,
  addProjectinfo,
  updateProjectinfo,
} from "@/api/geoInfor/projectinfo";
import {
  listEquipmentinfo,
  getEquipmentinfo,
  delEquipmentinfo,
  addEquipmentinfo,
  updateEquipmentinfo,
} from "@/api/geoInfor/equipmentinfo";
import {
  listGeothermalwellinfo,
  getGeothermalwellinfo,
  delGeothermalwellinfo,
  addGeothermalwellinfo,
  updateGeothermalwellinfo,
} from "@/api/geoInfor/geothermalwellinfo";
import {
  postlistmonitordata,
  getlistmonitordata,
} from "@/api/geoInfor/singleproject";
import { getToken } from "@/utils/auth";
import {
  listUpload,
  getUpload,
  delUpload,
  addUpload,
  updateUpload,
} from "@/api/uploadfile";

export default {
  components: {
    ElImageViewer,
  },
  name: "SingleProject",
  dicts: ["region_code", "geothermaltype", "utilizationmode", "enabled"],
  data() {
    return {
      projectEntryname: '',
      projectOptions: {},
      projectinfoList: [],
      title: "",
      projectno: null,
      showViewer: false, // 显示查看器
      seeDocumentUrl: "",
      percentage: 0,
      // 上传参数
      upload: {
        file_type:
          ".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/dr/upload/onefile",
        // 上传的文件列表
        fileList: [],
        // projectno:  drfb 41862   kfly 1161225  gzgx 726724 drcy 418325   file_module drfbtu shuizhitu zhuzhuangtu
        data: {
          projectno: 41862,
          file_type: ".jpg, .png",
          uploader: null,
          content: "",
          file_module: "zhuzhuangtu",
        },
      },
      docmentRadio: null,
      // 弹出层标题
      dialogTitle: "项目资料录入",
      // 是否显示弹出层
      documentOpen: false,
      projectOpen: false,
      wellOpen: false,
      deviceOpen: false,
      activeProjectinfo: {},
      activeWellInfor: [],
      monitorData: [],
      documentData: [],
      monitorDataPage: {
        total: 1,
        pageNum: 1,
        pageSize: 5,
      },
      devices: [],
      wellQueryParams: {
        pageNum: 1,
        pageSize: 9,
        projectno: null,
      },
      deviceQueryParams: {
        /* pageNum: 1,
        pageSize: 10, */
        equipmentno: null,
        wellno: null,
      },
      uploadQueryParams: {
        projectno: null,
        status: null,
      },
      projectForm: {},
      wellForm: {},
      deviceForm: {},
      rules: {},
      wellnos: [],
    };
  },
  watch: {
    docmentRadio: function (newValue, oldValue) {
      if (newValue == 1) {
        this.upload.data.file_module = "zhuzhuangtu";
      } else if (newValue == 2) {
        this.upload.data.file_module = "shuizhitu";
      } else if (newValue == 3) {
        this.upload.data.file_module = "othersdocument";
        this.upload.url = process.env.VUE_APP_BASE_API + "/dr/upload/morefile";
      }
      console.log(this.upload);
    },
  },
  computed: {
    pageMonitorData() {
      let offset =
        (this.monitorDataPage.pageNum - 1) * this.monitorDataPage.pageSize;
      let pageSize = this.monitorDataPage.pageSize;
      return offset + pageSize >= this.monitorData.length
        ? this.monitorData.slice(offset, this.monitorData.length)
        : this.monitorData.slice(offset, offset + pageSize);
    },
    /* wellnos(){
      return activeWellInfor
    } */
  },
  created() {
    const projectno = this.$route.params && this.$route.params.projectno;

    this.projectno = projectno;
    /** start 设置上传参数 */
    this.upload.data.projectno = projectno;
    this.upload.data.uploader = this.$store.getters.name;
    /**end 设置上传参数 */

    /** start 设置查询上传文件参数 */
    this.uploadQueryParams.projectno = projectno;
    this.getListUpload();
    /** end 设置查询上传文件参数 */

    //this.activeProjectinfo = this.$store.getters.activeProject;

    /**获取项目信息 */
    this.getProjectInfo(projectno);

    this.getWellList(projectno);

    setTimeout(() => {
      this.getDevices();
    }, 1000);
    this.listmonitordata({
      checkedFactors:
        "dr_mqtt_hsw,dr_mqtt_sw,dr_mqtt_hswz,dr_mqtt_swz,dr_mqtt_hgl,dr_mqtt_ll",
      projectno: projectno,
    });

    // 项目搜索选项
    this.getProjectList();
    //数据测试
    this.getData();
  },
  methods: {
    /** 返回按钮操作 */
    handleClose() {
      const obj = { path: "/geoInfor/project" };
      this.$tab.closeOpenPage(obj);
    },
    handleWellRow(row) {
      console.log(row);
    },

    listmonitordata(data) {
      let params = new URLSearchParams();
      params.append("projectno", data.projectno);
      params.append("checkedFactors", data.checkedFactors);
      postlistmonitordata(params).then((res) => {
        this.monitorData = this.getFactors(res.data);
        this.monitorDataPage.total = this.monitorData.length;
      });
    },
    getWellList(projectno) {
      this.wellQueryParams.projectno = projectno;
      return new Promise((resolve) => {
        listGeothermalwellinfo(this.wellQueryParams).then((res) => {
          this.activeWellInfor = res.rows;
          resolve();
        });
      });
    },
    getFactors(data) {
      let table = [];
      let date = [];
      data.forEach((factor) => {
        factor.data.forEach((item) => {
          date.push(item.str3);
        });
      });
      let uniqueDate = Array.from(new Set(date)).sort((a, b) => {
        return a > b ? -1 : 1;
      });
      uniqueDate.forEach((dateEle) => {
        let a = {
          时间: dateEle,
        };

        data.forEach((factor) => {
          factor.data.forEach((item) => {
            if (dateEle == item.str3) {
              a[item.str2] = item.num1;
            }
          });
        });

        table.push(a);
      });
      return table;
    },
    getMonitorList() {
      return this.monitorData;
    },
    getDevices() {
      if (this.activeWellInfor.length == 0) {
        return [];
      }
      this.devices = [];
      this.activeWellInfor.forEach((well) => {
        this.deviceQueryParams.wellno = well.wellno;
        listEquipmentinfo(this.deviceQueryParams).then((res) => {
          if (res.total > 0) {
            this.devices.push({
              wellno: res.rows[0].wellno,
              wellname: well.wellname,
              equipmentno: res.rows[0].equipmentno,
              equipmentid: res.rows[0].equipmentid,
              equipmentname: res.rows[0].equipmentname,
              exfactorydate: res.rows[0].exfactorydate,
            });
          }
        });
      });
    },
    mapWellno2name() {
      /* this.activeWellInfor.forEach((well)) */
    },

    /**地热井 */
    wellReset() {
      this.projectEntryname = null;
      this.wellForm = {
        wellno: null,
        projectno: null,
        wellname: null,
        longitude: null,
        latitude: null,
        atitude: null,
        orificediameter: null,
        nozzlediameter: null,
        pipewalldiameter: null,
        welltype: null,
        welldepth: null,
        waringlevel: null,
        staticlevel: null,
        staticdepth: null,
        dynamicdepth: null,
        utilizationmode: null,
        temperature: null,
        wellflow: null,
        startlevel: null,
        endlevel: null,
        enabled: null,
        content: null,
        createtime: null,
        updatetime: null,
      };
    },
    handleWellAdd() {
      this.wellReset();
      this.wellOpen = true;
      this.wellForm.projectno = this.projectno;
      this.projectEntryname = this.activeProjectinfo.entryname;
    },
    handleDeleteWell(row) {
      const wellnos = row.wellno;
      this.$modal
        .confirm('是否确认删除地热井名称为"' + row.wellname + '"的数据项？')
        .then(function () {
          return delGeothermalwellinfo(wellnos);
        })
        .then(() => {
          this.getWellList(this.projectno);
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    handleWellModify(row) {
      const wellno = row.wellno;
      getGeothermalwellinfo(wellno).then((response) => {
        this.wellForm = response.data;
        this.wellOpen = true;
      });
    },
    wellSubmitForm() {
      this.$refs["wellForm"].validate((valid) => {
        if (valid) {
          if (this.wellForm.wellno != null) {
            updateGeothermalwellinfo(this.wellForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getWellList(this.projectno);
            });
          } else {
            addGeothermalwellinfo(this.wellForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getWellList(this.projectno);
            });
          }
        }
      });
    },
    wellCancel() {
      this.wellOpen = false;
    },

    /** start项目基本信息 */
    getProjectInfo(projectno) {
      getProjectinfo(projectno).then((response) => {
        this.activeProjectinfo = response.data;
        this.$store.getters.activeProject = this.activeProjectinfo;
      });
    },
    handleProjectModify() {
      //console.log(this.activeProjectinfo)
      getProjectinfo(this.projectno).then((response) => {
        this.projectForm = response.data;
        this.projectOpen = true;
      });
    },
    projectCancel() {
      this.projectOpen = false;
      //this.reset();
    },
    projectSubmitForm() {
      this.$refs["projectForm"].validate((valid) => {
        if (valid) {
          updateProjectinfo(this.projectForm).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.projectOpen = false;
            this.getProjectInfo(this.projectForm.projectno);
          });
        }
      });
    },
    //项目搜索
    projectEntrynameChange(select) {
      this.wellForm.projectno = select;
    },
    //查询项目基本信息选择
    getProjectOptions(projectinfoList) {
      this.projectOptions = projectinfoList.map((item) => {
        return {
          value: item.projectno,
          label: item.entryname
        }
      });
    },
    //查询项目基本信息列表 
    getProjectList() {
      this.loading = true;
      listProjectinfo(this.projectQueryParams).then(response => {
        this.projectinfoList = response.rows;
        this.getProjectOptions(this.projectinfoList);
        this.loading = false;
      });
    },
    /** end 项目基本信息 */
    /**设备信息 */
    handleDeviceAdd() {
      this.deviceOpen = true;
      this.title = "安装地热井设备";
      console.log(this.devices);
    },
    handleDeviceModify(row) {
      this.title = "修改地热井设备";
      const equipmentid = row.equipmentid;
      getEquipmentinfo(equipmentid).then((response) => {
        this.deviceForm = response.data;
        this.deviceOpen = true;
        this.title = "修改监测设备信息";
        console.log(this.deviceForm);
      });
    },
    handleDeviceDelete(row) {
      const equipmentids = row.equipmentid;
      this.$modal
        .confirm(
          '是否确认删除监测设备信息编号为"' + equipmentids + '"的数据项？'
        )
        .then(function () {
          return delEquipmentinfo(equipmentids);
        })
        .then(() => {
          this.getDevices();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    deviceSubmitForm() {
      console.log(this.deviceForm);
      this.$refs["deviceForm"].validate((valid) => {
        if (valid) {
          if (this.deviceForm.equipmentid != null) {
            updateEquipmentinfo(this.deviceForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.deviceOpen = false;
              this.getDevices();
            });
          } else {
            addEquipmentinfo(this.deviceForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.deviceOpen = false;
              this.getDevices();
            });
          }
        }
      });
    },
    deviceCancel() {
      this.deviceOpen = false;
    },
    /**项目资料信息 */
    handleDocumentRow() { },
    handleDocumentSee(document) {

      let fileType = document.fileType;
      console.log(fileType)
      if (fileType == ".pdf") {
        window.open(process.env.VUE_APP_BASE_API + document.filePath);
      } else if (fileType == ".jpg" || fileType == ".png") {
        this.showViewer = true;
        console.log(process.env.VUE_APP_BASE_API + document.filePath);
        this.seeDocumentUrl = process.env.VUE_APP_BASE_API + document.filePath;
      }
    },

    /**打开项目录入dialog */
    handleDocmentDialog() {
      this.dialogTitle = "项目资料录入";
      this.documentOpen = true;
    },
    /**上传 */
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      console.log(event);
      console.log(file);
      this.upload.isUploading = true;
      this.percentage = ((event.loaded / event.total) * 100) | 0; //百分比
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this_ = this;
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.$confirm('上传成功, 是否继续上传?', '提示', {
        confirmButtonText: '继续上传',
        cancelButtonText: '返回',
        type: 'warning'
      }).then(() => {
        this_.upload.data.content = "";
      }).catch(() => {
        this.documentOpen = false;
      });
      this.seePath = response.url;
      this.getListUpload();
    },
    handleAdd() {
      this.percentage = 0;
      this.upload.fileList = [];
    },
    handleUpdate(row) {
      this.upload.fileList = [
        { name: this.form.fileName, url: this.form.filePath },
      ];
    },
    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
    getFileType(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      this.upload.data.file_type = fileType;
    },
    documentSubmitForm() {
      this.$refs.upload.submit();
    },
    documentCancel() {
      this.documentOpen = false;
    },
    /**上传结束 */
    documentDialogClose() {
      this.percentage = 0;
      this.getListUpload();
    },
    /**获取文档资料列表 */
    getListUpload() {
      listUpload(this.uploadQueryParams).then((res) => {
        this.documentData = res.rows;
        console.log(res.rows);
      });
    },
    handleDocumentDelete(row) {
      const id = row.fileId;
      this.$modal.confirm('是否确认删除文件模块为'+row.fileModule+" 文件名为"+row.fileName+'的数据项？').then(function () {
        return delUpload(id);
      }).then(() => {
        this.getListUpload();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
      console.log(row)
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
    getData() {
      setTimeout(() => {
        console.log(this.devices);
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.single_header {
  display: flex;
  .singleTitle {
    /* border: 1px solid rgb(11, 212, 162); */
    margin-left: 30%;
    font-size: 20px;
  }
}
.single_project {
  margin-top: 20px;
  display: flex;
  /* border: 1px solid red; */
  justify-content: space-around;
  .single_left {
    width: 48%;
    display: flex;
    flex-direction: column;

    .projectInfor {
      margin-bottom: 20px;
    }
    .wellInfor {
      /* margin-bottom: 20px; */
    }
  }
  .single_gap {
    width: 3px;
    background-color: rgb(174, 180, 179);
  }
  .single_right {
    width: 48%;
    display: flex;
    flex-direction: column;
    .monitorData {
      margin-bottom: 20px;
      /*  border: 1px solid rgb(219, 28, 38); */
      /* height: 100px; */
    }

    .deviceInfor {
      /* border: 1px solid rgb(223, 91, 14); */
      /* height: 100px; */
      margin-bottom: 20px;
    }

    .docmentData {
    }
  }
  .el-divider--vertical {
  }
  .single_content {
    background-color: rgb(216, 220, 229, 0.2);
    table {
      border-collapse: collapse;
    }
    table tr {
      height: 30px;
      font-size: 15px;
      border: 1px solid #fff;
      line-height: 30px;
      /* padding-left: 15px; */
      /* background-color: rgb(216, 220, 229); */
    }

    table tr td:nth-child(1) {
      font-size: 14px;
      /*  font-weight: 800; */
      width: 25%;
      text-align: center;
      border: 1px solid #fff;
      background: rgba(163, 211, 255, 0.3);
    }

    table tr td:nth-child(2) {
      padding: 0 20px 0;
    }

    table tr td:nth-child(8) {
      line-height: 23px;
    }

    table big {
      /*  padding: 5px 25px; */
      /*  border: 2px solid #00b7fd; */
      border-radius: 5px;
    }
  }
  .single-card {
  }
}
.table,
th,
tr {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

.xmgk {
  height: 100px;
  background-color: rgb(193, 194, 255, 0.6);
}
.leibie {
  width: 100px;
  background-color: rgb(193, 194, 255, 0.6);
}
.leibie1 {
  width: 200px;

  background-color: rgb(193, 194, 255, 0.6);
}
.leibie2 {
  width: 100px;
}
</style>
<style lang="scss" >
.documentDialog {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .el-dialog__header {
    padding-top: 10px;
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ebebeb;
    border-bottom: 1px solid rgb(185, 181, 181) !important;
  }
  .el-dialog__body {
    padding: 5px 40px !important;
  }
  .documentType {
    padding: 10px;
    margin-top: 10px;
    /*  border-bottom: 1px solid #eee; */
  }
  .documentProgress {
    padding: 10px;
  }
  .documentUpload {
    margin-top: 10px;
    margin-left: 20px;
    padding: 10px;
    .el-upload-dragger {
      width: 360px;
      height: 90px;
      .el-icon-upload {
        font-size: 30px;
        margin: 0 auto;
      }
      .el-upload__text {
      }
    }
  }
  .documentContent {
    margin-top: 10px;
    /*  border-bottom: 1px solid rgb(203, 209, 202); */
    padding: 10px;
    .el-input {
      width: 320px;
    }
    .el-input--medium .el-input__inner {
      height: 30px;
    }
  }
}
.singleDialog {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .el-dialog__header {
    padding-top: 10px;
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ebebeb;
    border-bottom: 1px solid rgb(185, 181, 181) !important;
  }
  .el-dialog__body {
    padding: 5px 40px !important;
  }
}
</style>